<template>
  <el-row id="exam-edit-box">
    <Breadcrumb :breadcrumb="breadcrumb"/>
    <el-row>
      <el-col :span="12" :offset="12" class="goBack-box">
        <el-button
          id="auditButton"
          class="buttonStyle2"
          @click="goBack()"
          >返回试卷列表</el-button
        >
      </el-col>
    </el-row>
    <el-row id="exam-box">
      <el-descriptions>
          <span slot="title">试卷名称：{{$route.params.exam.examName}}</span>
          <el-descriptions-item label="开始时间">{{exam.examDate}}</el-descriptions-item>
          <el-descriptions-item label="考试时长">{{exam.totalTime}}<span>分钟</span></el-descriptions-item>
          <el-descriptions-item label="试卷总分">{{exam.totalScore}}<span>分</span></el-descriptions-item>
          <el-descriptions-item label="试卷说明">{{exam.examNote}}</el-descriptions-item>
      </el-descriptions>
    </el-row>
    <el-row id="addProblem-box">
      <el-row class="addProblem-item">
        <el-row class="addProblem-header-item" :class="fixed == true && boxshows.boxshow1 ? 'fixed' : ''">
          <el-col :span="5">
            <label>选择题</label>
          </el-col>
          <el-col :span="4">
            <label>
              题目数量：
              <span v-if="examChoiceData">{{examChoiceData.length}}</span>
              <span v-else>0</span>
            </label>
          </el-col>
          <el-col :span="4" :offset="11">
            <span class="linkButton" @click="boxshows.boxshow1 = !boxshows.boxshow1">
              <span v-if="!boxshows.boxshow1">展开</span>
              <span v-if="boxshows.boxshow1">收起</span>
            </span>
            <span class="linkButton" @click="goRoute({name:'examEditProblem',params:{exam:exam,problemType:'选择题'}})">选题</span>
          </el-col>
        </el-row>
        <el-row class="eaxm-problem-item">
          <el-table
            class="eaxm-problem-table"
            :data="examChoiceData"
            style="width: 100%"
            v-show="boxshows.boxshow1"
          >
            <el-table-column label="序号" type="index" width="130"> </el-table-column>
            <el-table-column prop="problem" label="题目" width="710">
            </el-table-column>
            <el-table-column prop="difficulty" label="难度" width="180">
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="deleteExamOneProblemButton(scope.row)"
                  >移除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-row>
      <el-row class="addProblem-item">
        <el-row class="addProblem-header-item">
          <el-col :span="5">
            <label>判断题</label>
          </el-col>
          <el-col :span="4">
            <label>
              题目数量：
              <span v-if="examTrueOrFalseData">{{examTrueOrFalseData.length}}</span>
              <span v-else>0</span>
            </label>
          </el-col>
          <el-col :span="4" :offset="11">
            <span class="linkButton" @click="boxshows.boxshow2 = !boxshows.boxshow2">
              <span v-if="!boxshows.boxshow2">展开</span>
              <span v-if="boxshows.boxshow2">收起</span>
            </span>
            <span class="linkButton" @click="goRoute({name:'examEditProblem',params:{exam:exam,problemType:'判断题'}})">选题</span>
          </el-col>
        </el-row>
        <el-row class="eaxm-problem-item">
          <el-table
            class="eaxm-problem-table"
            :data="examTrueOrFalseData"
            style="width: 100%"
            v-show="boxshows.boxshow2"
          >
            <el-table-column label="序号" type="index" width="130"> </el-table-column>
            <el-table-column prop="problem" label="题目" width="710">
            </el-table-column>
            <el-table-column prop="difficulty" label="标签" width="180">
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="deleteExamOneProblemButton(scope.row)"
                  >移除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-row>
      <el-row class="addProblem-item">
        <el-row class="addProblem-header-item">
          <el-col :span="5">
            <label>简答题</label>
          </el-col>
          <el-col :span="4">
            <label>
              题目数量：
              <span v-if="examEssayData">{{examEssayData.length}}</span>
              <span v-else>0</span>
            </label>
          </el-col>
          <el-col :span="4" :offset="11">
            <span class="linkButton" @click="boxshows.boxshow3 = !boxshows.boxshow3">
              <span v-if="!boxshows.boxshow3">展开</span>
              <span v-if="boxshows.boxshow3">收起</span>
            </span>
            <span class="linkButton" @click="goRoute({name:'examEditProblem',params:{exam:exam,problemType:'简答题'}})">选题</span>
          </el-col>
        </el-row>
        <el-row class="eaxm-problem-item">
          <el-table
            class="eaxm-problem-table"
            :data="examEssayData"
            style="width: 100%"
            v-show="boxshows.boxshow3"
          >
            <el-table-column label="序号" type="index" width="130"> </el-table-column>
            <el-table-column prop="problem" label="题目" width="710">
            </el-table-column>
            <el-table-column prop="difficulty" label="标签" width="180">
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="deleteExamOneProblemButton(scope.row)"
                  >移除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-row>
    </el-row>
  </el-row>
</template>
<script>
import Breadcrumb from '@/components/common/Breadcrumb';
export default {
  name: "ExamEdit",
  components: {
    Breadcrumb,
  },
  data(){
    return{
      breadcrumb:[
        {name:"试卷管理",path:"exam"},
        {name:"所有试卷",path:"exam"},
        {name:"试卷题目编辑",path:""},
      ],
      exam:this.$route.params.exam,
      boxshows:{
        boxshow1:false,
        boxshow2:false,
        boxshow3:false,
      },
      examBoxshows:{
        nameBoxshow:false,
        noteBoxshow:false,
      },
      addProblemName: '1',
      examChoiceData:[
      ],
      examTrueOrFalseData:[
      ],
      examEssayData:[
      ],
      fixed:{
        fixed1: false
      }
    }
  },
  mounted () {
    window.addEventListener('scroll', this.fixedActiveBtn)
  },
  methods: {
    onSubmit() {
      console.log('submit!');
    },
    goRoute(location){
      console.log(this)
      console.log(location)
      this.$router.push(location)
    },
    GetExamChoiceList(examId){
      this.axios.get("/examdata/choice/"+examId)
      .then(response => {
          if(response.status == 200){
              this.examChoiceData = response.data.data;
              console.log(this.examChoiceData)
          }
      })
      .catch(error => alert(error));
    },
    GetExamTrueOrFalseList(examId){
      this.axios.get("/examdata/trueorfalse/"+examId)
      .then(response => {
          if(response.status == 200){
              this.examTrueOrFalseData = response.data.data;
              console.log(this.examTrueOrFalseData)
          }
      })
      .catch(error => alert(error));
    },
    GetExamEssayList(examId){
      this.axios.get("/examdata/essay/"+examId)
      .then(response => {
          if(response.status == 200){
              this.examEssayData = response.data.data;
              console.log(this.examEssayData)
          }
      })
      .catch(error => alert(error));
    },
    fixedActiveBtn () {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      scrollTop >= 329 ? (this.fixed = true) : (this.fixed = false)
    },
    deleteExamOneProblemButton(row){
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(row)
        this.deleteExamOneProblem(this.exam.examId,row.uuId)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    deleteExamOneProblem(examId,uuId){
      this.axios.post("/examdata/delete",{examId: examId,uuId:uuId})
      .then(response => {
          if(response.data.code == 200){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.refreshProblemList()
          }else{
              this.$message({
                type: 'error',
                message: '删除失败!'
              });
          }
      })
      .catch(error => alert(error));
    },
    refreshProblemList(){
      this.GetExamChoiceList(this.exam.examId)
      this.GetExamTrueOrFalseList(this.exam.examId)
      this.GetExamEssayList(this.exam.examId)
    },
    goBack(){
      this.$router.push({name:'exam'})
    }
  },
  created(){
    this.GetExamChoiceList(this.exam.examId)
    this.GetExamTrueOrFalseList(this.exam.examId)
    this.GetExamEssayList(this.exam.examId)
  },
};


</script>
<style scoped>
label{
  margin: 0px;
}
/* 自定义的样式 */
#exam-edit-box{
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 20px;
  user-select: none;
  background-color: #f6fafb !important;

  height: 670px;
}
#breadcrumb{
  padding-bottom: 10px;
  border-bottom: 1px solid #dcdfe6 !important;
  margin-bottom: 30px;
}
#exam-edit-box .buttonStyle1 {
  width: 100px;
  height: 30px;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  margin-left: 15px;
}
#addProblem-box{
  padding-top: 20px;
}
.addProblem-header-item{
  padding-top: 30px;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 20px;
  background-color: #ffffff;
}
.addProblem-header-item .linkButton{
  padding-right: 30px;
  cursor:pointer;
  font-weight: 700;
}
.addProblem-item{
  margin-bottom: 30px;
}

#exam-box{
  padding-left: 50px;
  padding-right: 50px;
  background-color: #ffffff;
  padding-top: 20px;
  padding-bottom: 20px;
  height: 150px;
}
.exam-item{
  height: 40px;
  line-height: 40px;
  margin-bottom: 20px;
}
.exam-item-content{
  padding-left: 20px;
}
.fixed {
  margin-top: 64px;
  position: fixed;
  z-index: 21;
  height: 70px;
  top: 0;
  left: 200px;
  right: 0;

  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 20px;
  background-color: #fafafa;
}
.goBack-box{
  text-align: right;
  margin-top: -60px;
  margin-bottom: 30px;
}
</style>
<style>
/* 修改element-ui的样式 */
.el-form-item{
  padding: 0px;
}
.eaxm-problem-table .cell {
  color: #000000;
  text-align: center;
  font-weight: 500;
}
.eaxm-problem-table .has-gutter th:nth-child(2) .cell,.eaxm-problem-table .el-table__row td:nth-child(2) .cell {
  text-align: left!important;
  padding-left: 30px;
  padding-right: 30px;
}
#examNote-input-box{
  margin-top: 5px;
}
#exam-edit-box .buttonStyle2 {
  width: auto;
  height: 30px;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  margin-right: 10px;
}
</style>